<template>
	<view class="face-container">

		<nav-bar
			title="人脸识别"
			fixed
			cover
			@on-back="$navigateBack()"
		></nav-bar>
		<view class="camera-container">
			<camera class="camera" device-position="front" @error="cinemaError">
				<cover-image v-if="photo" :src="photo" class="camera-image"></cover-image>
				<cover-view class="mask-container">
					<cover-view class="avatar-container">
						<cover-view class="frame lt">
							<cover-view class="line-h"></cover-view>
							<cover-view class="line-v"></cover-view>
						</cover-view>
						<cover-view class="frame rt">
							<cover-view class="line-h"></cover-view>
							<cover-view class="line-v"></cover-view>
						</cover-view>
						<cover-view class="frame lb">
							<cover-view class="line-h"></cover-view>
							<cover-view class="line-v"></cover-view>
						</cover-view>
						<cover-view class="frame rb">
							<cover-view class="line-h"></cover-view>
							<cover-view class="line-v"></cover-view>
						</cover-view>
					</cover-view>
				
					<cover-view class="test-error">
						{{ btnStatus == 1 ? '没有检测到人脸，请重试' : ''}}
					</cover-view>
					<cover-view class="bottom-container">
						<cover-view class="tip-text">{{tipList[tipIndex]}}</cover-view>
						<cover-view class="btn-ok" @tap="okBtn">{{btnText[btnStatus]}}</cover-view>
						<apple-sliver></apple-sliver>
					</cover-view>
				</cover-view>
			</camera>
		</view>
	</view>
</template>

<script>
	import NavBar from "../../components/nav-bar";
	import {
		getToken
	} from '@/utils/index.js';
	import {
		faceEnable,
		faceUpdate,
		uploadUrl
	} from '@/api/face.js';

	export default {
		components: {
			NavBar
		},
		data() {
			return {
				tipList: ['为保证数据真实，请避免出现逆光', '请露出五官，并无其他遮挡物'],
				btnText: ['采集人脸数据', '重新采集', '保存数据'],
				btnStatus: 0,
				tipIndex: 0,
				photo: '',
				imageKey: '',
				routeParams: {
					back: false,
					redirect: ''
				}
			}
		},
		methods: {
			cinemaError(err) {
				console.log(err)
			},
			back() {
				let pages = getCurrentPages()
				if (pages.length == 1) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
					return
				}
				
				const {back, redirect} = this.routeParams;
				console.log(this.routeParams)
				if (back) {
					return uni.navigateBack()
				}
				
				if (redirect) {
					return uni.redirectTo({
						url: redirect
					})
				}
			},
			async okBtn() {
				const {
					btnStatus
				} = this;
				switch (btnStatus) {
					case 0:
					case 1:
						this.cameraContext.takePhoto({
							success: ({
								tempImagePath
							}) => {
								this.imageKey = "";
								this.photo = tempImagePath

								uni.showLoading({
									title: '上传中...'
								})
								uni.uploadFile({
									header: {
										token: getToken()
									},
									url: uploadUrl,
									name: 'file',
									filePath: tempImagePath,
									success: ({
										data
									}) => {
										console.log('success', data)
										try {
											data = JSON.parse(data || {});
											if (data.code == 200) {
												this.imageKey = data.data;
												this.btnStatus = 2;
											} else {
												this.photo = '';
												this.btnStatus = 1;
											}
										} catch (err) {
											console.log(err)
										}
									},
									fail: (err) => {
										this.photo = ''
										this.btnStatus = 1
										console.log(err)
									},
									complete: () => {
										uni.hideLoading()
									}
								})
							}
						})
						break;
					case 2:
						try {
							await faceEnable(this.imageKey)
							this.back();
						} catch(err) {
							console.log(err)
						}
						break;
				}
			}
		},
		created() {
			this.cameraContext = uni.createCameraContext()
		},
		onLoad(option) {
			// 登录后返回到原页面
			this.routeParams.back = option.hasOwnProperty('back')
			// 登录后重定向到页面
			this.routeParams.redirect = option.redirect
			
			this.tipTimer = setInterval(() => {
				this.tipIndex = +(!this.tipIndex);
			}, 3000)
		},
		onUnload() {
			clearInterval(this.tipTimer)
			this.tipTimer = null;
		}
	}
</script>

<style lang="scss">
	.face-container {
		height: 100vh;
		padding-bottom: calc(44px + var(--status-bar-height));
		box-sizing: border-box;

		.camera-container,
		.mask-container,
		.camera,
		.camera-image {
			width: 100%;
			height: 100%;
		}

		.camera-container {
			position: relative;
		}

		.camera-image{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.mask-container {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}

		.avatar-container {
			position: absolute;
			// top: 110rpx;
			// left: 0;
			// right: 0;
			// width: 532rpx;
			// height: 532rpx;
			// margin: auto;
			// box-shadow: 0 0 0 750rpx rgba(0, 0, 0, 0.5);
			top: -390rpx;
			left: 50%;
			right: 0;
			width: 1632rpx;
			height: 1632rpx;
			margin-left: -816rpx;
			border: 500rpx solid rgba(0, 0, 0, 0.5);
			box-sizing: border-box;
			z-index: 0;

			.frame {
				position: absolute;
				width: 50rpx;
				height: 50rpx;
				
				.line-h {
					position: absolute;
					width: 100%;
					height: 4rpx;
					background:  #21FF03;
				}
				
				.line-v {
					position: absolute;
					height: 100%;
					width: 4rpx;
					background:  #21FF03;
				}
				
				&.lt {
					top: 0;
					left: 0;
					// border-left: 4rpx solid #21FF03;
					// border-top: 4rpx solid #21FF03;
					.line-h, .line-v{
						top: 0;
						left: 0;
					}
				}

				&.rt {
					top: 0;
					right: 0;
					// border-right: 4rpx solid #21FF03;
					// border-top: 4rpx solid #21FF03;
					
					.line-h, .line-v{
						top: 0;
						right: 0;
					}
				}

				&.lb {
					bottom: 0;
					left: 0;
					// border-left: 4rpx solid #21FF03;
					// border-bottom: 4rpx solid #21FF03;
					
					.line-h, .line-v{
						bottom: 0;
						left: 0;
					}
				}

				&.rb {
					bottom: 0;
					right: 0;
					// border-right: 4rpx solid #21FF03;
					// border-bottom: 4rpx solid #21FF03;
					
					.line-h, .line-v{
						bottom: 0;
						right: 0;
					}
				}
			}
		}

		.test-error {
			position: absolute;
			top: 780rpx;
			left: 0;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
			text-align: center;
		}

		.bottom-container {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			text-align: center;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background: #fff;

			.tip-text {
				margin-top: 60rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #808080;
				line-height: 1.2;
			}

			.btn-ok {
				width: 690rpx;
				margin: 48rpx auto 35rpx auto;
				padding: 33rpx 0;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;
				border-radius: 10rpx;
				background: #F24244;
			}
		}
	}
</style>
